// =============================================================================
// SCSS/SITE/STACKS/ETHOS/_POST-SLIDER.SCSS
// -----------------------------------------------------------------------------
// Styles for the post slider.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Base Styles
//   02. Individual Slides
//   03. Direction Navigation
// =============================================================================

// Base Styles
// =============================================================================

.x-post-slider {
  position: relative;
  overflow: hidden;
  background-color: $baseModBackground;

  .x-slides {
    background-color: $black;
  }
}



// Individual Slides
// =============================================================================

.x-post-slider-entry {
  position: relative;
  padding-bottom: 425px;
  overflow: hidden;
  background-color: $baseModBackground;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
          background-size: cover;

  > a {
    display: block;
    padding: 0 65px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background-color: $entryCoverBackground;
    @include transition(#{background-color 0.4s ease});

    > .cover {
      display: table;
      width: 100%;
      height: 100%;

      > .middle {
        display: table-cell;
        vertical-align: middle;
      }
    }
  }

  &:hover {
    > a {
      background-color: $entryCoverBackgroundHover;
    }
  }

  .featured-meta { @include font-size(1.8); }
  .h-featured    { @include font-size(4.2); }
  .featured-view { @include font-size(1.6); }

  @include break(cubs) {
    .featured-meta { @include font-size(1.6); }
    .h-featured    { @include font-size(3.2); }
    .featured-view { @include font-size(1.4); }
  }

  @include break(middle-bear) {
    .featured-meta { display: none; }
    .h-featured    { @include font-size(2.4); }
    .featured-view { @include font-size(1.0); }
  }

  @include break(baby-bear) {
    .h-featured    { @include font-size(1.6); }
    .featured-view { display: none; }
  }
}



// Direction Navigation
// =============================================================================

.x-post-slider {
  .flex-direction-nav {
    a {
      margin-top: -20px;
      width: 35px;
      height: 45px;
      line-height: 41px;
    }
  }
}